<template>
  <div class="login-box">
    <div class="left">
      <h2>交通仿真后台管理系统</h2>
      <svg-icon name="login-pic" :style="loginPicStyle"></svg-icon>
    </div>
    <div class="right">
      <h3>用户登录</h3>

      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-position="top"
        class="demo-ruleForm"
      >
        <el-form-item prop="userName">
          <el-input
            v-model="ruleForm.userName"
            class="w-50 m-2"
            size="large"
            placeholder="请输入用户名"
          >
            <template #prefix>
              <el-icon><UserFilled /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <el-input
            v-model="ruleForm.pass"
            class="w-50 m-2"
            size="large"
            placeholder="请输入密码"
            show-password
          >
            <template #prefix
              ><el-icon><Key /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <div class="identify">
            <el-input
              style="width: 50%"
              class="w-50 m-2"
              v-model="sidentifyMode"
              placeholder="请输入验证码"
            />
            <div class="code" @click="refreshCode">
              <SIdentify :identifyCode="identifyCode"></SIdentify>
            </div>
          </div>
        </el-form-item>

        <el-form-item>
          <div class="tip">
            <!-- 记住我 -->
            <el-checkbox v-model="ruleForm.checked" class="rememberMe"
              >记住我</el-checkbox
            >
            <!-- 找回密码 -->
            <el-button type="text" @click="findPwd" class="forgetPw"
              >忘记密码？</el-button
            >
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            style="width: 100%"
            type="primary"
            @click="submitForm(ruleFormRef)"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import SIdentify from "@/components/Sidentify.vue";
import { onMounted, reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const ruleFormRef = ref<FormInstance>();
let loginPicStyle = {
  height: "300px",
};
const ruleForm = reactive({
  userName: "",
  pass: "",
  checked: false,
});

let sidentifyMode = ref(""); //输入框验证码
let identifyCode = ref(""); //图形验证码
let identifyCodes = ref("1234567890abcdefjhijklinopqrsduvwxyz"); //验证码出现的数字和字母

//组件挂载
onMounted(() => {
  identifyCode.value = "";
  makeCode(identifyCodes.value, 4);
});

// 随机生成验证码字符串
const makeCode = (o: string, l: number) => {
  for (let i = 0; i < l; i++) {
    identifyCode.value += o[randomNum(0, o.length)];
  }
};
// 生成随机数
const randomNum = (min: number, max: number) => {
  max = max + 1;
  return Math.floor(Math.random() * (max - min) + min);
};

// 更新验证码
const refreshCode = () => {
  identifyCode.value = "";
  makeCode(identifyCodes.value, 4);
};

const rules = reactive<FormRules<typeof ruleForm>>({
  pass: [{ required: true, message: "请输入密码" }],
  userName: [{ required: true, message: "请输入用户名" }],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      router.push({ path: "/lightManage" });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

// 找回密码
const findPwd = () => {};
</script>

<style scoped lang="scss">
.login-box {
  width: 800px;
  height: 450px;
  box-shadow: 0 0 10px #ccc;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  overflow: hidden;
  .left {
    background: #a6d3ff;
    width: 400px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    h2 {
      margin-top: 50px;
      text-align: center;
    }
    img {
      height: 100%;
    }
  }
  .right {
    padding: 60px;
    width: 500px;
    h3 {
      margin-bottom: 30px;
      text-align: center;
    }
  }
}
.tip {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.identify {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
